<template>
  <div class="x-tutorrial-upload" :style="`background-color: ${bg_color};`">
    <!-- :action="$ala.clientUploadApi()" -->
    <div class="tutorrial-upload_li-left">
      <el-upload style="width: 100%;height: 100%;" action="https://diyapi.5ug.com/Api/StorageFile/upload" :show-file-list="false" multiple drag :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <ul class="tutorrial-upload_ul">
          <li class="tutorrial-upload_li" v-for="(item,index) in viewModel" :key="index">
            <!-- // $ala.urlImage(item) -->
            <img :src="getImg(item)" @click="tabCahang(index)" />
            <div class="tutorrial-action" @click.stop="imgDetele(index)">
              <i class="el-icon-delete"></i>
            </div>
          </li>
          <li class="tutorrial-upload_li tutorrial-upload_active" v-if="viewModel.length!=limit">
            <i class="el-icon-plus"></i>
          </li>
          <!-- <li class="tutorrial-text">
          拖动图片到此处
        </li> -->
        </ul>
      </el-upload>
    </div>
    <div class="tutorrial-upload_li-right">
      <zk-paste @change="pasteChange"></zk-paste>
    </div>
  </div>
</template>
<script>
  export default {
    model: {
      event: 'chang',
      prop: 'dataModel'
    },
    props: {
      bg_color: {
        default: '#ecf8ff'
      },
      dataModel: {},
      limit: {
        default: 1,
        type: Number
      }
    },
    data () {
      return {
        viewModel: [],
        tabIndex: null
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.viewModel = this.dataModel
      },
      handleAvatarSuccess (res) {
        if (this.viewModel.length !== this.limit) {
          if (res.status === 1) {
            if (this.tabIndex !== null) {
              this.$set(this.viewModel, this.tabIndex, res.result.path)
            } else {
              this.viewModel.push(res.result.path)
            }
          }
        } else {
          if (this.tabIndex !== null) {
            this.$set(this.viewModel, this.tabIndex, res.result.path)
          }
        }
        this.tabIndex = null
      },
      tabCahang (tIndex) {
        this.tabIndex = tIndex
      },
      beforeAvatarUpload (file) {

      },
      imgDetele (imgIndex) {
        this.viewModel.splice(imgIndex, 1)
      },
      pasteChange (data) {
        this.viewModel.push(data.path)
      },
      getImg (item) {
        return 'https://diyapi.5ug.com' + item
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.$emit('chang', val)
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>